<template>
	<div class="studentStatistics">
		<div class="teach_h">
			<span>我的统计</span>
		</div>
		<div class="studentStatistics-c">
			<template>
				<el-tabs v-model="activeName">
					<el-tab-pane label="我的上传" name="1">
						<div class="classNotice_search clear">
							<el-input class="classNotice_sc fl" placeholder="资源名称" prefix-icon="el-icon-search" v-model="keyword" @change="searchLiveList">
							</el-input>
							<el-button class="fr" type="primary" @click="downloadMater()" :disabled="isDisable">导出统计</el-button>
						</div>
						<template v-if="myUpload.length > 0">
							<el-table border style="100%" :data="myUpload">
								<el-table-column prop="name" label="资源名称" width="240" show-overflow-tooltip>
								</el-table-column>
								<el-table-column align='center' prop="string_name" label="资源分类" width="170" show-overflow-tooltip>
								</el-table-column>
								<el-table-column prop="user" align='center' label="资源类型" width="119" show-overflow-tooltip>
									<template slot-scope="scope">
										<span>{{fileTypeList[+scope.row.file_type ]}}</span>
									</template>
								</el-table-column>
								<el-table-column prop="create_time" align='center' label="上传时间" width="170" show-overflow-tooltip>
								</el-table-column>
							</el-table>
						</template>
						<div class="pageBox" v-if="total_number > 10">
							<el-pagination @current-change="change_page" @size-change="sizeChange" :current-page.sync="page_index" :page-sizes="[10, 50, 100, 200, 300, 400]" :page-size="page_size" layout="sizes, prev, pager, next" :total="total_number">
							</el-pagination>
						</div>
						<div class="dependent" v-if="placeholder">
							<i class="ipm image_nofound"></i>
							<p>
								还没发现任何相关的内容哦~
							</p>
						</div>
					</el-tab-pane>
					<el-tab-pane label="我的下载" name="2">
						<div class="classNotice_search clear">
							<el-input class="classNotice_sc fl" placeholder="资源名称" prefix-icon="el-icon-search" v-model="keyword2" @change="searchLiveList2">
							</el-input>
							<el-button class="fr" type="primary" @click="downloadMater2()" :disabled="isDisable">导出统计</el-button>
						</div>
						<template v-if="myDownload.length > 0">
							<el-table border style="100%" :data="myDownload">
								<el-table-column prop="name" label="资源名称" width="240" show-overflow-tooltip>
								</el-table-column>
								<el-table-column align='center' prop="string_name" label="资源分类" width="170" show-overflow-tooltip>
								</el-table-column>
								<el-table-column prop="user" align='center' label="资源类型" width="119" show-overflow-tooltip>
									<template slot-scope="scope">
										<span>{{fileTypeList[+scope.row.file_type]}}</span>
									</template>
								</el-table-column>
								<el-table-column prop="create_time" align='center' label="上传时间" width="170" show-overflow-tooltip>
								</el-table-column>
							</el-table>
						</template>
						<div class="pageBox">
							<el-pagination v-if="total_number2 > 10" @current-change="change_page2" @size-change="sizeChange2" :current-page.sync="page_index2" :page-sizes="[10, 50, 100, 200, 300, 400]" :page-size="page_size2" layout="sizes, prev, pager, next" :total="total_number2">
							</el-pagination>
						</div>
						<div class="dependent" v-if="placeholder2">
							<i class="ipm image_nofound"></i>
							<p>
								还没发现任何相关的内容哦~
							</p>
						</div>
					</el-tab-pane>
					<el-tab-pane label="我的学习" name="3">
						<div class="classNotice_search clear">
							<el-input class="classNotice_sc fl" placeholder="资源名称" prefix-icon="el-icon-search" v-model="keyword3" @change="searchLiveList3">
							</el-input>
							<el-button class="fr" type="primary" @click="downloadMater3()" :disabled="isDisable">导出统计</el-button>
						</div>
						<template v-if="myStudy.length > 0">
							<el-table border style="100%" :data="myStudy">
								<el-table-column prop="name" label="资源名称" width="240" show-overflow-tooltip>
								</el-table-column>
								<el-table-column align='center' prop="string_name" label="资源分类" width="170" show-overflow-tooltip>
								</el-table-column>
								<el-table-column prop="user" align='center' label="资源类型" width="119" show-overflow-tooltip>
									<template slot-scope="scope">
										<span>{{fileTypeList[+scope.row.file_type]}}</span>
									</template>
								</el-table-column>
								<el-table-column prop="create_time" align='center' label="上传时间" width="170" show-overflow-tooltip>
								</el-table-column>
							</el-table>
						</template>
						<div class="pageBox">
							<el-pagination v-if="total_number3 > 10" @current-change="change_page3" @size-change="sizeChange3" :current-page.sync="page_index3" :page-sizes="[10, 50, 100, 200, 300, 400]" :page-size="page_size3" layout="sizes, prev, pager, next" :total="total_number3">
							</el-pagination>
						</div>
						<div class="dependent" v-if="placeholder3">
							<i class="ipm image_nofound"></i>
							<p>
								还没发现任何相关的内容哦~
							</p>
						</div>
					</el-tab-pane>
				</el-tabs>
			</template>
		</div>
	</div>
</template>
<script>
import FileSaver from 'file-saver'
import XLSX from 'xlsx'

export default {
	data() {
		return {
			searchVal: '',
			myUpload: [], //上传
			total_number: 0,
			page_size: 10,
			page_index: 1,
			keyword: '',
			exportList: [],

			myDownload: [], //下载
			total_number2: 0,
			page_size2: 10,
			page_index2: 1,
			keyword2: '',
			exportList2: [],

			myStudy: [], //学习
			total_number3: 0,
			page_size3: 10,
			page_index3: 1,
			keyword3: '',
			exportList3: [],

			activeName: '1',
			tableData: [{
				title: '测试',
				framework: '一年级/语文',
				user: '李娜',
				date: '2018/4/17',
			}],
			placeholder: false,
			placeholder2: false,
			placeholder3: false,
			isDisable: false,
			fileTypeList: ['其他','文档','日志', '图片', '压缩文件', '音频', '视频', '应用程序','其他']
		}
	},
	created() {
		this.getmyUpload()
	},
	watch: {
		'activeName'(nval, val) {
			if (nval === '1') {
				this.page_index = 1;
				this.page_size = 10
				this.getmyUpload()

			} else if (nval === '2') {
				this.page_index2 = 1
				this.page_size2 = 10
				this.getmyDownload()
			} else if (nval === '3') {
				this.page_index3 = 1
				this.page_size3 = 10
				this.getmyStudy()
			}
		}
	},
	methods: {

		getmyUpload() {
			let success = (res => {
				let data = res.data;
				this.myUpload = data.data;
				this.total_number = data.data_sum;
				this.page_index = parseInt(data.page_index)
				for (var i = 0; i < this.myUpload.length; i++) {
					this.myUpload[i].create_time = this.myUpload[i].create_time.substring(0, 16)
				}

				this.myUpload.length === 0 ?
					this.placeholder = true :
					this.placeholder = false
			});
			this.$ajax({
				url: 'api/statistics/my_upload',
				method: 'get',
				params: {
					userid: this.$g.user_id,
					page_index: this.page_index,
					page_size: this.page_size,
					keyword: this.keyword
				},
				func: {
					success: success
				}
			})
		},
		getmyDownload() {
			let success = (res => {
				let data = res.data;

				this.myDownload = data.data;
				this.total_number2 = data.data_sum;
				this.page_index2 = parseInt(data.page_index);

				this.myDownload.length === 0 ?
					this.placeholder2 = true :
					this.placeholder2 = false
			});
			this.$ajax({
				url: 'api/statistics/my_download',
				method: 'get',
				params: {
					userid: this.$g.user_id,
					page_index: this.page_index2,
					page_size: this.page_size2,
					keyword: this.keyword2
				},
				func: {
					success: success
				}
			})
		},
		getmyStudy() {
			let success = (res => {
				let data = res.data;
				this.myStudy = data.data;
				this.total_number3 = parseInt(data.data_sum);
				this.page_index3 = parseInt(data.page_index);
				this.myStudy.length === 0 ?
					this.placeholder3 = true :
					this.placeholder3 = false
			});
			this.$ajax({
				url: 'api/statistics/my_study',
				method: 'get',
				params: {
					userid: this.$g.user_id,
					page_index: this.page_index3,
					page_size: this.page_size3,
					keyword: this.keyword3
				},
				func: {
					success: success
				}
			})
		},
		change_page(val) {
			this.page_index = val;
			this.getmyUpload()
		},
		sizeChange(val) {
			this.page_index = 1;
			this.page_size = val;
			this.getmyUpload()
		},
		change_page2(val) {
			this.page_index = val;
			this.getmyDownload()
		},
		sizeChange2(val) {
			this.page_index2 = 1;
			this.page_size2 = val;
			this.getmyDownload()
		},
		change_page3(val) {
			this.page_index = val;
			this.getmyStudy()
		},
		sizeChange3(val) {
			this.page_index3 = 1;
			this.page_size3 = val;
			this.getmyStudy()
		},
		//搜索
		searchLiveList() {
			this.page_index = 1;
			this.getmyUpload()
		},
		searchLiveList2() {
			this.page_index = 1;
			this.getmyDownload()
		},
		searchLiveList3() {
			this.page_index = 1;
			this.getmyStudy()
		},
		//下载列表
		downloadMater() {
			this.isDisable = true
			this.exportList = [];
			setTimeout(() => {
				this.isDisable = false
			}, 1000)
			const defaultCellStyle = { font: { name: "Verdana", sz: 14, color: "FF00FF88" }, fill: { fgColor: { rgb: "FFFFAA00" } } };
			const wopts = { bookType: 'xlsx', bookSST: false, type: 'binary', defaultCellStyle: defaultCellStyle, showGridLines: false };
			const wb = { SheetNames: ['Sheet1'], Sheets: {}, Props: {} };
			if (this.myUpload.length === 0) {
				this.$message.error('还没发现任何相关的内容哦~,无法下载相关内容');
				return
			}
			let file_type = null;
			
			for (let i = 0; i <= this.myUpload.length - 1; i += 1) {
				// if (this.myUpload[i].file_type == '1') {
				// 	file_type = '文档'
				// } else if (this.myUpload[i].file_type == '2') {
				// 	file_type = '日志'
				// } else if (this.myUpload[i].file_type == '3') {
				// 	file_type = '图片'
				// } else if (this.myUpload[i].file_type == '4') {
				// 	file_type = '压缩文件'
				// } else if (this.myUpload[i].file_type == '5') {
				// 	file_type = '音频文件'
				// } else if (this.myUpload[i].file_type == '6') {
				// 	file_type = '视频'
				// } else if (this.myUpload[i].file_type == '7') {
				// 	file_type = '应用程序'
				// } else if (this.myUpload[i].file_type == '8' || this.myUpload[i].file_type == '0') {
				// 	file_type = '其他'
				// }
				this.exportList.push({
					"资源名称": this.myUpload[i].name,
					"资源分类": this.myUpload[i].string_name,
					"资源类型": this.fileTypeList[+this.myUpload[i].file_type],
					"上传时间": this.myUpload[i].create_time,
				});
			}
			wb.Sheets['Sheet1'] = XLSX.utils.json_to_sheet(this.exportList)

			//创建二进制对象写入转换好的字节流
			let tmpDown = new Blob([this.s2ab(XLSX.write(wb, wopts))], { type: "application/octet-stream" });
			FileSaver.saveAs(tmpDown, `我的上传记录.xlsx`);
		},
		downloadMater2() {
			this.isDisable = true
			this.exportList2 = []
			setTimeout(() => {
				this.isDisable = false
			}, 1000)
			const defaultCellStyle = { font: { name: "Verdana", sz: 14, color: "FF00FF88" }, fill: { fgColor: { rgb: "FFFFAA00" } } };
			const wopts = { bookType: 'xlsx', bookSST: false, type: 'binary', defaultCellStyle: defaultCellStyle, showGridLines: false };
			const wb = { SheetNames: ['Sheet1'], Sheets: {}, Props: {} };
			if (this.myDownload.length === 0) {

				this.$message.error('还没发现任何相关的内容哦~,无法下载相关内容');
				return
			}
			let file_type = null;
			for (let i = 0; i <= this.myDownload.length - 1; i += 1) {
				// if (this.myDownload[i].file_type == '1') {
				// 	file_type = '文档'
				// } else if (this.myDownload[i].file_type == '2') {
				// 	file_type = '日志'
				// } else if (this.myDownload[i].file_type == '3') {
				// 	file_type = '图片'
				// } else if (this.myDownload[i].file_type == '4') {
				// 	file_type = '压缩文件'
				// } else if (this.myDownload[i].file_type == '5') {
				// 	file_type = '音频文件'
				// } else if (this.myDownload[i].file_type == '6') {
				// 	file_type = '视频'
				// } else if (this.myDownload[i].file_type == '7') {
				// 	file_type = '应用程序'
				// } else if (this.myDownload[i].file_type == '8' || this.myDownload[i].file_type == '0') {
				// 	file_type = '其他'
				// }
				this.exportList2.push({
					"资源名称": this.myDownload[i].name,
					"资源分类": this.myDownload[i].string_name,
					"资源类型": this.fileTypeList[+this.myDownload[i].file_type],
					"上传时间": this.myDownload[i].create_time,
				});
			}
			wb.Sheets['Sheet1'] = XLSX.utils.json_to_sheet(this.exportList2)

			//创建二进制对象写入转换好的字节流
			let tmpDown = new Blob([this.s2ab(XLSX.write(wb, wopts))], { type: "application/octet-stream" });
			FileSaver.saveAs(tmpDown, `我的下载记录.xlsx`);
		},
		downloadMater3() {
			this.isDisable = true
			this.exportList3 = []
			setTimeout(() => {
				this.isDisable = false
			}, 1000)
			const defaultCellStyle = { font: { name: "Verdana", sz: 14, color: "FF00FF88" }, fill: { fgColor: { rgb: "FFFFAA00" } } };
			const wopts = { bookType: 'xlsx', bookSST: false, type: 'binary', defaultCellStyle: defaultCellStyle, showGridLines: false };
			const wb = { SheetNames: ['Sheet1'], Sheets: {}, Props: {} };
			if (this.myStudy.length === 0) {

				this.$message.error('还没发现任何相关的内容哦~,无法下载相关内容');
				return
			}
			let file_type = null;
			for (let i = 0; i <= this.myStudy.length - 1; i += 1) {
				// if (this.myStudy[i].file_type == '1') {
				// 	file_type = '文档'
				// } else if (this.myStudy[i].file_type == '2') {
				// 	file_type = '日志'
				// } else if (this.myStudy[i].file_type == '3') {
				// 	file_type = '图片'
				// } else if (this.myStudy[i].file_type == '4') {
				// 	file_type = '压缩文件'
				// } else if (this.myStudy[i].file_type == '5') {
				// 	file_type = '音频文件'
				// } else if (this.myStudy[i].file_type == '6') {
				// 	file_type = '视频'
				// } else if (this.myStudy[i].file_type == '7') {
				// 	file_type = '应用程序'
				// } else if (this.myStudy[i].file_type == '8' || this.myStudy[i].file_type == '0') {
				// 	file_type = '其他'
				// }
				this.exportList3.push({
					"资源名称": this.myStudy[i].name,
					"资源分类": this.myStudy[i].string_name,
					"资源类型": this.fileTypeList[+this.myStudy[i].file_type ],
					"上传时间": this.myStudy[i].create_time,
				});
			}
			wb.Sheets['Sheet1'] = XLSX.utils.json_to_sheet(this.exportList3)

			//创建二进制对象写入转换好的字节流
			let tmpDown = new Blob([this.s2ab(XLSX.write(wb, wopts))], { type: "application/octet-stream" });
			FileSaver.saveAs(tmpDown, `我的学习记录.xlsx`);
		},
		//字符串转字符流
		s2ab(s) {
			if (typeof ArrayBuffer !== 'undefined') {
				var buf = new ArrayBuffer(s.length);
				var view = new Uint8Array(buf);
				for (let i = 0; i != s.length; i += 1) {
					view[i] = s.charCodeAt(i) & 0xFF;
				}
				return buf;
			} else {
				var buf = new Array(s.length);
				for (let i = 0; i != s.length; i += 1) {
					buf[i] = s.charCodeAt(i) & 0xFF;
				}
				return buf;
			}
		}
	}
}
</script>